<template>
	<view>
		<view class="card">
			<view class="cell">
				<view class="label">设备分类：</view>
				<view class="value" @click="getClassShow(index,'device_type_name')">
					{{info.type_name1&&info.type_name1.district_name}} 
				</view>
			</view>
			<view class="cell">
				<view class="label">设备类型：</view>
				<view class="value" @click="getClassShow(index,'device_type_name1')">
					{{info.type_name2&&info.type_name2.district_name}} 
				</view>
			</view>

			<view class="cell">
				<view class="label">设备品牌：</view>
				<view class="value" @click="getClassShow(index,'device_type_name2')">
					{{info.type_name3&&info.type_name3.district_name}} 
				</view>
			</view>
			<view class="cell">
				<view class="label">设备系列：</view>
				<view class="value" @click="getClassShow(index,'device_type_name3')">
					{{info.type_name4&&info.type_name4.district_name}}  
				</view>
			</view>
			<view class="cell">
				<view class="label">设备名称：</view>
				<view class="value" @click="getClassShow(index,'device_name')">
					{{info.device_name || '请选择'}} 
				</view>
			</view>
			<view class="cell">
				<view class="label">设备编号：</view>
				<view class="value">
					{{info.device_sn}}
				</view>
			</view>
			<view class="cell">
				<view class="label">报修详情：</view>
			</view>
			<view class="textarea">
				{{info.describe}}
			</view>
			<view class="line"></view>
			<view class="cell">
				<view class="label">报修图片({{imgCount}}/9)</view>
			</view>
			<view class="upload">
				<app-upload v-model="info.store_imgs" :value="info.store_imgs" accept="media" multiple disabled
					:maxCount="9">
				</app-upload>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "deviceCard",
		props: {
		 info:{
			 type:Object,
			 default:()=>{}
		 }
		},
		data() {
			return {
				status: ['正常', '故障停机', '异常可使用', '报废']
			};
		},
		computed: {
			imgCount() {
				const list = this.info.store_imgs ? this.info.store_imgs.split('|') : []

				return list.length

			}
		},
	}
</script>

<style scoped lang="scss">
	.card {
		border-radius: 20px;
		background-color: #FFFFFF;
		margin: 20rpx;
		padding:20rpx 30rpx;
	}
	.textarea {
		background-color: #F5F5F5;
		border-radius: 10rpx;
		padding: 20rpx;
	}
	.line {
		border-bottom: 1px solid #E9E9E9;
		padding-bottom: 30rpx;
	}
</style>